vue3的插件系统

Vue3的插件系统

一段代码给vue应用实例添加全局功能。它的格式是一个object暴露出一个install()方法，或者一个function

它没有严格的限制，一般有一下几种功能

添加全局方法或者属性
添加全局资源:指令，过滤器等
通过全局混入来添加一些一些组件选项
通过config.globalProperties来添加app实例方法

import { App } from 'vue'
import HelloWorld from './HelloWorld'
const plugins = {
  install:(app:App) => {
    //注册全局属性
    app.config.globalProperties.$echo = () => {
      console.log('a plugin')
    }
    //注册全局组件
    app.component('hello-world',HelloWorld);
    app.provide('test',{message:'from plugin'})
  }
}
export default plugins

//main.ts 
import TextPlugin from './TextPlugin'
app.use(TextPlugin)

// App.vue setup里面
onMounted(() => {
  console.log(inject('test'))
  getCurrentInstance()?.appContext.config.globalProperties.$echo();
})

//输出
// {message:'from plugin'}
//a plugin

Vue3的插件系统​

Vue3的插件系统